<template>
  <div class="detail-wrap">
    <el-row :gutter="20">
      <el-col :span="item.span || 5" v-for="(item, index) in columns" :key="item.label" :offset="getOffset(item, index)">
        <div class="detail-wrap-container">
          <p class="detail-wrap-label">{{ item.label }}：</p>
          <p class="detail-wrap-value">{{ orderInfo[item.key] }}</p>
          <!-- <p class="detail-wrap-value">欢迎胡松杨检查！欢迎胡松杨检查！欢迎胡松杨检查！欢迎胡松杨检查！欢迎胡松杨检查！欢迎胡松杨检查！欢迎胡松杨检查！欢迎胡松杨检查！</p> -->
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    orderInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {

    }
  },
  methods: {
    getOffset(item, index) {
      if(item.span === 24) return 0
      return index % 4 === 0 ? 0 : 1
    }
  }
}
</script>
<style lang="scss" scoped>
.detail-wrap {
  padding: 0 10px;
  margin-top: 20px;
  .el-col {
    margin-bottom: 16px;
  }
  .detail-wrap-container {
    display: flex;
    font-size: 14px;
    color: #000000;
    .detail-wrap-label {
      width: 100px;
      text-align: right;
    }
    .detail-wrap-value {
      flex: 1;
    }
  }
}
</style>